<script setup>
  import {
    ref, reactive
  } from "vue";

  import {
    Search,
    Refresh
  } from "@element-plus/icons-vue"

  import Add from "./add.vue";

  // 查询表单
  const genderOptions = reactive([
    {label:"Man",value:1},
    {label:"Woman",value:2}
  ]);
  let queryFormData = reactive({
    username: "",
    gender: 1,
    date: null,
  });

  // 批量操作
  const addRef = ref("");
  const addFun = function() {
    addRef.value.open({ operType: "add" });
  }
  const editFun = function(data) {
    addRef.value.open({ operType: "edit", data });
  }

  // 列表操作
  let tableData = reactive([
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', },
  ]);
  let tableSelectData = ref([]);
  const tableSelection = function(selectionData) {
    console.log('selectionData ------- ', selectionData);
    tableSelectData.value = selectionData;
  }

  // 分页
  const currentPage4 = ref(4);
  const pageSize4 = ref(100);
  const small = ref(false);
  const background = ref(true);
  const disabled = ref(false);
  const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
  }
  const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
  }

</script>

<template>
  <div class="user-container">
    <el-form :model="queryFormData" inline class="form-inline">
      <el-form-item prop="username" label="Username">
        <el-input v-model="queryFormData.username" placeholder="Please input Username" clearable/>
      </el-form-item>
      <el-form-item prop="gender" label="Gender">
        <el-select v-model="queryFormData.gender" placeholder="Please Choose Gender" clearable>
          <el-option v-for="item in genderOptions" :label="item.label" :value="item.value" :key="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="Birthday">
        <el-date-picker v-model="queryFormData.date" type="date" placeholder="Please Choose Birthday" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search">Search</el-button>
        <el-button :icon="Refresh">Reset</el-button>
      </el-form-item>
    </el-form>

    <div class="content">
      <div class="toolbar">
        <el-button type="primary" @click="addFun">Add</el-button>
        <el-button type="primary" :disabled="tableSelectData.length <= 0">Batch Removes</el-button>
      </div>
      <div style="flex: 1; min-height: 0; padding: 10px;">
        <el-table :data="tableData" @selection-change="tableSelection" height="100%" style="width: 100%">
          <el-table-column type="selection" />
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
          <el-table-column label="Address">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="editFun(row)">Edit</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="padding-bottom: 10px; padding-left: 10px;"
      />
    </div>

    <Add ref="addRef"></Add>
  </div>
</template>

<style scoped lang="scss">
.form-inline {
  margin: 20px;
  margin-bottom: 0;
  background-color: white;
  padding: 18px 18px 0;
  .el-select {
    --el-select-width: 140px;
  }
  .el-input {
    --el-input-width: 140px;
  }
  .el-date-editor {
    --el-date-editor-width: 140px;
  }
}

.user-container {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    min-height: 0;
    background-color: white;
    margin: 20px;
    margin-top: 10px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    .toolbar {
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 10px;
    }
    .el-table {
      flex: 1;
    }
  }
}
</style>